<template>
  <div class="plugin-demo">
    <header class="demo-header">
      <h1>Vue 插件系统详解与实践</h1>
      <p>深入理解 Vue 插件的底层原理和自定义实现</p>
    </header>

    <main class="demo-content">
      <!-- 插件原理说明 -->
      <section class="theory-section">
        <h2>🧠 插件系统底层原理</h2>
        
        <div class="principle-card">
          <h3>1. app.use() 执行流程</h3>
          <div class="code-block">
            <pre><code>// Vue 内部 app.use() 简化实现
function use(plugin, ...options) {
  if (installedPlugins.has(plugin)) {
    return this // 防止重复安装
  }
  
  if (plugin && typeof plugin.install === 'function') {
    plugin.install(this, ...options) // 调用插件的 install 方法
  } else if (typeof plugin === 'function') {
    plugin(this, ...options) // 直接执行插件函数
  }
  
  installedPlugins.add(plugin) // 记录已安装
  return this // 支持链式调用
}</code></pre>
          </div>
        </div>

        <div class="principle-card">
          <h3>2. 插件的本质</h3>
          <ul>
            <li><strong>函数式插件</strong>：直接可执行的函数 <code>(app, options) => {}</code></li>
            <li><strong>对象式插件</strong>：包含 install 方法的对象 <code>{ install(app, options) {} }</code></li>
            <li><strong>核心目的</strong>：修改 Vue 应用实例，为应用添加全局功能</li>
          </ul>
        </div>

        <div class="principle-card">
          <h3>3. 插件能做什么</h3>
          <div class="capabilities-grid">
            <div class="capability-item">
              <h4>🌐 全局属性/方法</h4>
              <p>app.config.globalProperties</p>
            </div>
            <div class="capability-item">
              <h4>🧩 全局组件</h4>
              <p>app.component()</p>
            </div>
            <div class="capability-item">
              <h4>📐 全局指令</h4>
              <p>app.directive()</p>
            </div>
            <div class="capability-item">
              <h4>💉 依赖注入</h4>
              <p>app.provide()</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 实际演示区域 -->
      <section class="demo-section">
        <h2>🚀 自定义插件实践演示</h2>
        
        <div class="demo-card">
          <h3>1. 全局方法测试</h3>
          <div class="demo-actions">
            <button @click="testCustomMessage" class="demo-btn">
              测试 $customMessage
            </button>
            <button @click="testFormatText" class="demo-btn">
              测试 $formatText
            </button>
            <button @click="testCustomModal" class="demo-btn">
              测试 $showCustomModal
            </button>
          </div>
          <div class="result-display" v-if="formattedText">
            <strong>格式化结果：</strong>{{ formattedText }}
          </div>
        </div>

        <div class="demo-card">
          <h3>2. 全局组件测试</h3>
          <div class="demo-actions">
            <CustomAlert message="这是一个信息提示" type="info" />
            <CustomAlert message="操作成功完成" type="success" />
            <CustomAlert message="请注意相关风险" type="warning" />
            <CustomAlert message="发生了错误" type="error" />
          </div>
        </div>

        <div class="demo-card">
          <h3>3. 全局指令测试</h3>
          <div class="demo-actions">
            <p v-highlight="'lightblue'">这段文字使用了 v-highlight="'lightblue'" 指令</p>
            <p v-highlight="'lightgreen'">这段文字使用了 v-highlight="'lightgreen'" 指令</p>
            <p v-highlight>这段文字使用了默认的 v-highlight 指令</p>
          </div>
        </div>

        <div class="demo-card">
          <h3>4. 依赖注入测试</h3>
          <div class="config-display">
            <h4>插件配置信息：</h4>
            <pre><code>{{ JSON.stringify(pluginConfig, null, 2) }}</code></pre>
          </div>
        </div>

        <div class="demo-card">
          <h3>5. 类型化插件测试</h3>
          <div class="demo-actions">
            <button @click="testTypedPlugin" class="demo-btn">
              获取类型化配置
            </button>
          </div>
          <div class="result-display" v-if="typedResult">
            <strong>类型化结果：</strong>{{ typedResult }}
          </div>
        </div>
      </section>

      <!-- 实现指南 -->
      <section class="guide-section">
        <h2>📚 自定义插件实现指南</h2>
        
        <div class="guide-step">
          <h3>步骤 1: 创建插件文件</h3>
          <div class="code-block">
            <pre><code>// plugins/MyPlugin.ts
import { App } from 'vue'

export const MyPlugin = {
  install(app: App, options?: any) {
    // 插件逻辑实现
    console.log('插件安装中...', options)
    
    // 添加全局属性
    app.config.globalProperties.$myMethod = () => {
      console.log('我的插件方法被调用了!')
    }
  }
}</code></pre>
          </div>
        </div>

        <div class="guide-step">
          <h3>步骤 2: 在 main.ts 中注册</h3>
          <div class="code-block">
            <pre><code>// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { MyPlugin } from './plugins/MyPlugin'

const app = createApp(App)
app.use(MyPlugin, { /* 插件选项 */ })
app.mount('#app')</code></pre>
          </div>
        </div>

        <div class="guide-step">
          <h3>步骤 3: 在组件中使用</h3>
          <div class="code-block">
            <pre><code>// 在任意组件中
&lt;script setup lang="ts"&gt;
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const myMethod = instance?.proxy?.$myMethod

// 或者在 Options API 中
// this.$myMethod()
&lt;/script&gt;</code></pre>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, getCurrentInstance } from 'vue'

// 获取插件注入的配置
const pluginConfig = inject('customPluginConfig')
// const typedPluginConfig = inject('typedPluginConfig')

// 响应式数据
const formattedText = ref('')
const typedResult = ref('')

// 获取当前实例以访问全局属性
const instance = getCurrentInstance()

// 测试方法
const testCustomMessage = () => {
  if (instance?.proxy?.$customMessage) {
    instance.proxy.$customMessage('Hello from 自定义插件测试!')
  }
}

const testFormatText = () => {
  if (instance?.proxy?.$formatText) {
    formattedText.value = instance.proxy.$formatText('这是一个测试文本')
  }
}

const testCustomModal = () => {
  if (instance?.proxy?.$showCustomModal) {
    instance.proxy.$showCustomModal(
      '自定义模态框', 
      '这是通过插件创建的自定义模态框，展示了插件如何扩展应用功能。'
    )
  }
}

const testTypedPlugin = () => {
  if (instance?.proxy?.$getConfig) {
    const apiUrl = instance.proxy.$getConfig('apiUrl')
    typedResult.value = `API URL: ${apiUrl}`
  }
}
</script>

<style lang="scss" scoped>
.plugin-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.demo-header {
  text-align: center;
  margin-bottom: 40px;
  
  h1 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 2.5em;
  }
  
  p {
    color: #7f8c8d;
    font-size: 1.2em;
  }
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

// 原理说明样式
.theory-section {
  h2 {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }
}

.principle-card {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 0 8px 8px 0;
  
  h3 {
    color: #2c3e50;
    margin-bottom: 15px;
  }
  
  ul {
    line-height: 1.6;
    
    li {
      margin-bottom: 8px;
      
      code {
        background: #e9ecef;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
      }
    }
  }
}

.code-block {
  background: #2d3748;
  border-radius: 8px;
  overflow-x: auto;
  
  pre {
    margin: 0;
    padding: 20px;
    
    code {
      color: #e2e8f0;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      line-height: 1.5;
    }
  }
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.capability-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  text-align: center;
  
  h4 {
    color: #495057;
    margin-bottom: 8px;
  }
  
  p {
    color: #6c757d;
    font-family: monospace;
    font-size: 12px;
  }
}

// 演示区域样式
.demo-section {
  h2 {
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }
}

.demo-card {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  h3 {
    color: #495057;
    margin-bottom: 20px;
    font-size: 1.3em;
  }
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.demo-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  }
}

.result-display {
  background: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 6px;
  padding: 12px;
  margin-top: 15px;
  
  strong {
    color: #155724;
  }
}

.config-display {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  
  h4 {
    color: #495057;
    margin-bottom: 10px;
  }
  
  pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 13px;
    margin: 0;
  }
}

// 指南样式
.guide-section {
  h2 {
    color: #27ae60;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }
}

.guide-step {
  margin-bottom: 30px;
  
  h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #ecf0f1;
  }
}

// 全局组件样式
:global(.custom-alert) {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
  font-weight: 500;
  
  &.custom-alert--info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
  }
  
  &.custom-alert--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }
  
  &.custom-alert--warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
  }
  
  &.custom-alert--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }
  
  .custom-alert__icon {
    margin-right: 8px;
    font-size: 18px;
  }
  
  .custom-alert__message {
    flex: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .plugin-demo {
    padding: 15px;
  }
  
  .demo-header h1 {
    font-size: 2em;
  }
  
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-actions {
    flex-direction: column;
  }
}
</style>